<template>
  <div class="selfAside_module">
    <el-aside width="200px">
      <el-scrollbar>
        <el-menu
    :default-active="activePath"
    background-color="#333"
    text-color="#fff"
    active-text-color="#409EFF"
  >
    <template v-for="item in menuData">
      <!-- 判断是否有子菜单 -->
      <el-sub-menu v-if="item.children && item.children.length > 0" :index="item.path" :key="item.path">
        <template #title>
          <span>{{ item.name }}</span>
        </template>
        <!-- 递归渲染子菜单 -->
        <MenuItem :menuData="item.children" />
      </el-sub-menu>
      <el-menu-item v-else :index="item.path" :key="item.path">
        <span>{{ item.name }}</span>
      </el-menu-item>
    </template>
  </el-menu>
      </el-scrollbar>
    </el-aside>
  </div>
</template>

<script lang="ts">
import { defineComponent,PropType } from "vue";
import { MenuData } from "../../viewModel/aside";
export default defineComponent({
  name: 'MenuItem',
  props: {
    menuData: {
      type: Array as PropType<MenuData[]>,
      required: true
    }
  },
  setup() {

    return {
    };
  },
});
</script>
<style>
.selfAside_module .el-aside {
    background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item,.selfAside_module .el-sub-menu__title {
    color:#fff;
    background-color: rgba(84, 92, 100, 1);
}
.selfAside_module .el-menu-item:hover {
    background: #333;
}
.el-submenu__title:focus, .el-submenu__title:hover {
    background: blue;
}

</style>
<style scoped>

</style>
